<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品入库</title>

    <!-- 导入样式 -->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-table.min.css"/>
    <!-- 导入js -->
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap/js/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap/js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
    <!--		bootstrapTable-->

    <script type="text/javascript">

        $(function(){

            //查询
            var query_sel = $("#query_sel");

            // 数据表格加载数据
            $("#data_table").bootstrapTable({
                url: "product/queryAll",
                pagination: true,
                pageSize: 5,
                striped: true,
                //client 客户端分页
                sidePagination: 'client',
                height: 500,

                queryParams: function() {
                    return {
                        productname: $("#query_productname").val()
                    }
                },

                columns:[{
                    checkbox: true,
                    visible: false                  //是否显示全选框
                },
                    {
                        // 映射json对象里的属性
                        field: 'pid',
                        // 文字居中
                        align: 'center',
                        // 列标题
                        title: '产品编号'
                    },{
                        // 映射json对象里的属性
                        field: 'productname',
                        // 文字居中
                        align: 'center',
                        // 列标题
                        title: '产品名称'
                    },{
                        // 映射json对象里的属性
                        field: 'quantity',
                        // 文字居中
                        align: 'center',
                        // 列标题
                        title: '库存'
                    },{
                        // 映射json对象里的属性
                        field: 'address',
                        // 文字居中
                        align: 'center',
                        // 列标题
                        title: '地址'
                    },{
                        // 映射json对象里的属性
                        field: 'price',
                        // 文字居中
                        align: 'center',
                        // 列标题
                        title: '价格'
                    },{
                        // 映射json对象里的属性
                        field: 'pid',
                        // 文字居中
                        align: 'center',
                        // 列标题
                        title: '操作',
                        formatter: function (value, row, index) {   //自定义组件
                            var pid = value;
                            var result = "";
                            result += '<button type="button" class="btn btn-outline-danger btn-sm">入库</button>&nbsp;&nbsp;';
                            result += '<button type="button" class="btn btn-outline-primary btn-sm">修改</button>&nbsp;&nbsp;';
                            result += '<button type="button" onclick="DeleteByIds('+ pid + ')" class="btn btn-outline-danger btn-sm">删除</button>';
                            return result;
                        }
                    }],

            });

            //查询选择框点击事件
            $("#sel_btn").click(function() {
                // 刷新数据表格
                $("#data_table").bootstrapTable('refresh');
            })


        });

        // 删除用户
        function DeleteByIds(eid) {


        }


    </script>

</head>
<body>

<!-- 查询框 -->
<div class="container " style="margin: 10px 150px;">

    <form action="#" id="sel_form" class="form-inline">
        <div class="form-group col-sm-4  col-md-offset-1">
            产品名称：<input class="form-control" id="query_productname" type="text" />
        </div>

        <button type="button" id="sel_btn">查询</button>


    </form>
</div>

<!-- 数据展示 -->
<div class="container">
    <table id="data_table"></table>
</div>

</body>
</html>
